<template>
    <div class="file-view" id="file-view" :class="{'full-screen': isFullScreen}">
        <MaterialResPlayer
            :material="props.fileData"
            :downloadable="false"
            :video-options="{ autoplay: false, controlBar: {pictureInPictureToggle: false}}"
            class="tpkcw-res"
        />
        <div class="toggle-fullscreen">
            <span @click="toggleFullScreen">
                <img v-show="!isFullScreen" src="@/assets/img/mooc/fullscreen.png" alt="">
                <img v-show="isFullScreen" src="@/assets/img/mooc/no-fullscreen.png" alt="">
            </span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount, computed, watch, nextTick } from 'vue';
import { MaterialResPlayer } from '@yanxiu/player';
import { useRoute } from 'vue-router';
import useReport from '@/hooks/useReport.js';
import screenFull from 'screenfull'

const route = useRoute();
const report = useReport();

defineExpose({
    startRecord
})

const props = defineProps({
    fileData: {
        type: Object,
        default: () => {}
    },
    detail: {
        type: Object,
        default: () => {}
    }
})

const isFullScreen = ref(false)

async function startRecord (onlineState = '') {
    report.startWatchTime();
    await nextTick();
    return await report.reportFn(route.params.moocId, props.detail.courseWareId, 0, onlineState);
}

function toggleFullScreen(){
    let ele = document.getElementById('file-view')
    if(screenFull.isEnabled){
        screenFull.toggle(ele)
    }
}

function fullChange(e){
    isFullScreen.value = screenFull.isFullscreen
}

onBeforeUnmount(() => {
    report.hbReport();
    report.endReportFn();
    report.endWatchTime();
    screenFull.off('change', fullChange)
})

onMounted(() => {
    screenFull.on('change', fullChange)
})




</script>

<style lang="scss" scoped>
.file-view {
    height: auto;
    width: 100%;
    background: #ffffff;
    :deep(.material-res-player) {
        width: 100% !important;
        height: 458px !important; 
    }
    :deep(.res-player) {
        width: 100% !important;
        height: 100% !important; 
    }
    :deep(.player-wrap) {
        width: 100% !important;
        height: 100% !important; 
    }
    .toggle-fullscreen{
        height: 40px;
        background: #F0F0F0;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        box-sizing: border-box;
        img{
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
    }
}
.full-screen{
    .toggle-fullscreen{
        background-color: #333333;
    }
    .material-res-player{
        height: calc(100% - 40px) !important;
    }
}

</style>